<template>
  <div class="search">
    <div class="searchbox">
      <i class="iconfont icon-41"></i>
      <input
        type="text"
        placeholder="搜索歌曲、歌手、专辑"
        v-model="inpConent"
        @input="inpsearch"
        @focus="test"
      />
      <i
        class="iconfont icon-shanchu"
        @click="delsearch"
        v-show="this.$store.state.isblock"
      ></i>
    </div>
  </div>
</template>

<script>
// import { searchMusicList } from "@/api/Search";

export default {
  data() {
    return {
      inpConent: this.$store.state.searchWord,
      searchlist: [],
      List: [],
      timeout: null,
    };
  },
  methods: {
    inpsearch() {
      this.timeout = setTimeout(() => {
        if (this.timeout) clearTimeout(this.timeout);
        // input防抖
        if (this.inpConent.length) {
          this.$store.dispatch("actionsGetRecommendList", {
            worldVal: this.inpConent,
            showVal: false,
          });
         
          this.$store.commit("changeIsblock", true);
        } else {
          this.$store.dispatch("actionsGetRecommendList", {
            worldVal: this.inpConent,
            showVal: true,
          });
          this.$store.commit("changeIsblock", false);
        }
      }, 500);
    },
    test() {
      if (this.inpConent.length) {
        this.$store.dispatch("actionsGetRecommendList", {
          worldVal: this.inpConent,
          showVal: false,
        });
        this.$store.commit("changeIsblock", true);
      } else {
        this.$store.dispatch("actionsGetRecommendList", {
          worldVal: this.inpConent,
          showVal: true,
        });
        this.$store.commit("changeIsblock", false);
      }
      this.$store.commit("changeIsSearchShow", true);
      this.$store.commit("changeIsShow", true);
    },
    delsearch() {
      this.$emit("delItem", this.inpConent);
      this.inpConent = "";
      this.$store.commit("changeIsblock", false);
    },
  },
  watch: {
    "$store.state.searchWord": function () {
      this.inpConent = this.$store.state.searchWord;
      this.$store.commit("changeSearchWorld", this.inpConent);
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  .searchbox {
    margin: vw(25) vw(20);
    padding: 0 vw(60);
    position: relative;
    height: vw(60);
    background-color: #ebecec;
    border-radius: 38px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .icon-41 {
      color: #999;
      font-size: vw(32);
      position: absolute;
      left: 0;
      top: vw(12);
      margin: 0 vw(14);
    }
    input {
      outline: none;
      border: none;
      background-color: transparent;
      height: vw(55);
      width: 100%;
      font-size: vw(26);
    }

    .icon-shanchu {
      font-size: vw(28);
      color: #000;
      position: absolute;
      right: 2%;
    }
  }
}
</style>